<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body{
				background-color: black;
			}
			
			img{
				position: absolute;
				left: 500px;
				top:200px;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
					onkeydown=function(event){
						if(event.keyCode == "32"){//按下空格变身
						$("#player").attr("src","img/player1.gif");
						var time = 3;
						}
					}
			$("#player").dblclick(function(event){
				$(this).attr("src","img/player2.gif");
				
			});
											
			$(document).click(function(event){
			//event=window.event||event;  ?
			event=window.event;
			arcX = event.clientX-80;//鼠标点击的位置的
			arcY = event.clientY-60;//鼠标点击的位置
											
			/* 	arcX = event.screenX;
			arcX = event.screenY; */
			//console.log($("#player").offsetLeft);
			
			var X=parseInt($("#player").css('left'));
			var Y=parseInt($("#player").css('top'));//当前的照片的位置
			
			if(X<arcX){
				$("#player").attr("src","img/player_right.gif");
			}else{
												
				$("#player").attr("src","img/player_left.gif");
			}
			let myset = setInterval(lf,"200");
			let myset2 = setInterval(rt,"200");
											
			function lf(){
			if(X<arcX){
													
			if((arcX-X)<10){
				X=X+(arcX-X);
				var XPX=X+"PX";
				clearInterval(myset);
				$("#player").stop().css({"left":XPX});
				if(X==arcX&&Y==arcY){
					$("#player").stop().attr("src","img/player_right.jpg");
				}
			}else{
				X=X+10;
				var XPX=X+"PX";
					$("#player").stop().css({"left":XPX});
					// await.sleep(1000);
					}
			}else{
				if((X-arcX)<10){
					X=X-(X-arcX);
					var XPX2=X+"PX";
					$("#player").stop().css({"left":XPX2});
					clearInterval(myset);
					if(X==arcX&&Y==arcY){
						$("#player").stop().attr("src","img/player_left.jpg");
					}
				}else{
					X=X-10;
					var XPX2=X+"PX";
				//	console.log(XPX2);
					$("#player").stop().css({"left":XPX2});
					}
				}
			} 
			function rt(){
				if(Y<arcY){
					if((arcY-Y)<10){
						Y=Y+(arcY-Y);
						var YPX=Y+"PX";
						clearInterval(myset2);
						$("#player").stop().css({"top":YPX});
						if(X==arcX&&Y==arcY){
							$("#player").stop().attr("src","img/player_right.jpg");
						}
														
					}else{
						Y=Y+10;
						var YPX=Y+"PX";
				//		console.log(YPX);
						$("#player").stop().css({"top":YPX});
						// await.sleep(1000);
					}
				}else{
					if((Y-arcY)<10){
					Y=Y-(Y-arcY);
					var YPX2=Y+"PX";
			//		console.log(YPX2);
					$("#player").css({"top":YPX2});
					clearInterval(myset2);
					if(X==arcX&&Y==arcY){
						$("#player").stop().attr("src","img/player_left.jpg");
					}
					}else{
						Y=Y-10;
						var YPX2=Y+"PX";
					//	console.log(YPX2);
						$("#player").stop().css({"top":YPX2});
						}
					}
				}
			})	
																
		});
						
		</script>
	</head>
	<body>
		<img id="player" src="img/player_left.gif" >
	</body>
</html>
